<template>
	<view class="modal-popup-packbox fixed" v-if="isSetShowPopup">
		<view class="modal-content-box relative" @click.stop="isSetShowPopup = true">
			<image class="bg" 
			:src="`/static/apps/app-confirm-bg.png`"
			mode=""></image>
			
			<view class="modal-content-name relative">{{ title }}</view>
			<view class="modal-content-txt relative" v-html="content" v-if="content">
			</view>
			<view class="modal-content-txt relative" v-else>
				<slot></slot>
			</view>
			<view class="modal-content-btn flex-justify-content-around relative">
				<view class="cancel-txt-btn flex-all-center relative" @click.stop="setCloseFun" v-if="isShowCancel">
					<image class="bg" 
					:src="`/static/apps/app-popup-btn-bg.png`"
					mode=""></image>
					<text class="relative">{{cancelText}}</text>
				</view>
				<view class="sure-txt-btn flex-all-center relative" @click.stop="setSureFun">
					<image class="bg" 
					:src="`/static/apps/app-popup-btn-bg.png`"
					mode=""></image>
					<text class="relative">{{confirmText}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "comModalPopup",
		props: {
			
			title: String,
			content: String,
			
			isShowCancel: {
				type: Boolean,
				default: () => true
			},
			
			cancelText: String,
			confirmText: String,
			value: {
				type: Boolean,
				default: () => true
			},
			
		},
		computed: {
			
			isSetShowPopup: {
				get() {
					return this.value
				},
				set(v) {
					this.$emit('input', v)
				},
			},
			commonConfigs() {
				return this.$store.getters.commonConfigs || {};
			},
			
		},
		data() {
			return {
			}
		},
		methods: {
			
			setSureFun() {
				this.$emit('setSureFun')
			},
			setCloseFun() {
				this.isSetShowPopup = false
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.modal-popup-packbox {
		left: 0;
		top: 0;
		z-index: 10000;
		width: 100vw;
		height: 100vh;
		background-color: rgba(0, 0, 0, 0.8);
		.modal-content-box{
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			margin: auto;
			width: 748rpx;
			height: 495rpx;
			transform: translateY(-100rpx);
			padding: 98rpx 120rpx 0;
			color: #FFF;
			font-size: 32rpx;
			.modal-content-name{
				text-align: center;
				white-space: nowrap;
				font-size: 36rpx;
				font-weight: bold;
			}
			.modal-content-txt{
				overflow-y: auto;
				margin-top: 30rpx;
				height: 280rpx;
				text-align: justify;
			}
			.modal-content-btn{
				color: #fff;
				margin-top: 80rpx;
				.cancel-txt-btn,.sure-txt-btn{
					width: 351rpx;
					height: 83rpx;
				}
				.cancel-txt-btn{
					opacity: 0.6;
				}
			}
		}
	}
</style>
